<template>
  <!--    <div id="orderDiv">-->
  <!--        <el-button @click="toPayment" type="primary">去支付</el-button>-->
  <el-dialog
      title="支付宝扫码支付"
      :visible.sync="dialogVisible"
      width="252px"
      center
      :close-on-click-modal="false"
      :show-close="false"
      :modal="modalShow">
    <!--二维码生成-->
    <vueQr :text="qr" :size="200" :margin="10" :correctLevel="0" :whiteMargin="false"
           :logoSrc="require('../assets/pay/alipay.png')"></vueQr>
    <el-button size="small" style="margin-left: 30%;transform: translateY(40%)" @click="cancelPay">取消支付
    </el-button>
    <span id="dialogSpan" v-show="paySucc == true"></span>
    <span id="dialogSpan2" v-show="paySucc == true">
        <i class="el-icon-success"
           style="background-color: #FFFFFF; color:#67C23A; font-size: 60px;border-radius: 30px;"/>
        <br/>
        支付成功
      </span>
  </el-dialog>
  <!--    </div>-->
</template>

<script>
import vueQr from 'vue-qr'
import {postNewPay} from '@/utils/apis/pay'

export default {
  name: 'PayPage',
  components: {
    vueQr
  },
  props: ['orderMap'],
  data() {
    return {
      dialogVisible: false,
      qr: "",
      paySucc: false,
      modalShow: true
    }
  },
  methods: {
    async toPayment() {
      let _this = this;
      // 这里填写后台支付的地址
      // postNewPay(_this.orderMap).then(res => {
      //     this.qr = res.data.data;
      //     if ("WebSocket" in window) {
      //         // 打开一个 web socket
      //         // 通道地址按照项目进行配置
      //         var ws = new WebSocket("ws://localhost:8091/bindingRecord");
      //         ws.onopen = function () {
      //             // Web Socket 已连接上，使用 send() 方法发送数据
      //             // ws.send("data");
      //             // alert("数据发送中...");
      //         };
      //         ws.onmessage = function (evt) {
      //             var received_msg = evt.data;
      //             console.log('wx收到消息' + received_msg)
      //             if (Boolean(evt.data)) {
      //                 _this.paySucc = true;
      //                 setTimeout(() => {
      //                     _this.dialogVisible = false;
      //                     _this.paySucc = false
      //                 }, 3 * 1000);
      //             }
      //             ws.close();
      //             _this.$emit('saveTheOrder')
      //         };
      //         ws.onclose = function () {
      //
      //         };
      //     } else {
      //         // 浏览器不支持 WebSocket
      //         alert("您的浏览器不支持 WebSocket!");
      //     }
      // });

      window.open(`http://localhost/sandbox/sandboxPay?type=${_this.orderMap.type}&price=${_this.orderMap.price}&subject=${_this.orderMap.subject}`);
      if ("WebSocket" in window) {
        // 打开一个 web socket
        // 通道地址按照项目进行配置
        console.log("支持ws")
        var ws = new WebSocket("ws://localhost:8091/bindingRecord");
        ws.onopen = function () {
          // Web Socket 已连接上，使用 send() 方法发送数据
          ws.send("data");
          // alert("数据发送中...");
        };
        ws.onmessage = function (evt) {
          var received_msg = evt.data;
          console.log('wx收到消息' + received_msg)
          if (Boolean(evt.data)) {
            _this.paySucc = true;
            setTimeout(() => {
              // _this.dialogVisible = false;
              _this.paySucc = false
            }, 3 * 1000);
          }
          ws.close();
          _this.$emit('saveTheOrder')
        };
        ws.onclose = function () {

        };
      } else {
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
      }
      // this.dialogVisible = true;
    },
    cancelPay() {
      const map = this.orderMap
      map.validTime = 3600
      map.qr = this.qr
      this.$store.commit('saveNewUnsettledOrder', map)
      // this.$notify.info('当前有' + this.$store.state.Unsettled.length + '条未结算订单')
      this.dialogVisible = false
    },
    closeModal() {
      this.modalShow = false
    },
  }
}
</script>

<style scoped>
#dialogSpan {
  display: inline-block;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 80px;
  right: 27px;
  opacity: 0.9;
  background-color: #FFFFFF;
}

#dialogSpan2 {
  display: inline-block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 124px;
  right: 80px;
  font-size: 20px;
  text-align: center;
}
</style>
